<div id="<?php echo $uniqid;?>" style="">
  <el-container>
      <el-main style="padding: 0;" class="goods_sku_info">
          <table class="datagrid-htable" border="0" cellspacing="0" cellpadding="0"
                 style="width: 100%;border: #ccc 0 solid;border-collapse:collapse;">
            <thead>
            <tr class="datagrid-header-row" style="background-color: #f9f9f9">
              <th style="width: 34%;"><div>规格</div></th>
              <th style="width: 5%;"><div>库存</div></th>
              <th style="width: 7%;"><div>价格</div></th>
              <th style="width: 8%;"><div id="th_activity_sku_sales"><i class="el-icon-info"></i>销量</div></th>
              <th style="width: 10%;">
                <div id="th_activity_sku_stock"><i class="el-icon-info"></i>活动库存</div>
                <el-popover placement="top" popper-class="batch_activity_popover" width="160" trigger="click" title="批量设置活动库存" v-model="batch_activity_sku_stock_visible">
                  <el-input-number value="0" name="batch_activity_sku_stock" size="mini" controls-position="right" :min="0" style="max-width: 130px"></el-input-number>
                  <div style="text-align: right; margin: 10px 0 0 0;">
                    <el-button size="mini" type="text" @click="batch_activity_sku_stock_visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="batchScoreSubmit('activity_sku_stock', $event)">确定</el-button>
                  </div>
                  <i class="el-icon-edit-outline" style="color: #0442e0; font-size: 1.1em; cursor: pointer;" slot="reference">批量</i>
                </el-popover>
              </th>
              <th style="width: 12%;">
                <div id="th_activity_sku_price"><i class="el-icon-info"></i>活动价格</div>
                <el-popover placement="top" popper-class="batch_activity_popover" width="160" trigger="click" title="批量设置活动价格" v-model="batch_activity_sku_price_visible">
                  <el-input-number value="0" name="batch_activity_sku_price" :precision="2" size="mini" controls-position="right" :min="0" style="max-width: 130px"></el-input-number>
                  <div style="text-align: right; margin: 10px 0 0 0;">
                    <el-button size="mini" type="text" @click="batch_activity_sku_price_visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="batchScoreSubmit('activity_sku_price', $event)">确定</el-button>
                  </div>
                  <i class="el-icon-edit-outline" style="color: #0442e0; font-size: 1.1em; cursor: pointer;" slot="reference">批量</i>
                </el-popover>
              </th>
              <th style="width: 8%;"><div>操作</div></th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(sku,index) in sku_info">
              <tr :class="('undefined' !== typeof sku.data_key && (skuData[sku.data_key].activity_sku_option == 'add' || skuData[sku.data_key].activity_sku_option == 'edit'))?'datagrid-body-row datagrid-body-row-selected':'datagrid-body-row'">
                <td>
                  <div class="sku_infos_box">
                    <template v-for="(info, i) in sku.goods_sku">
                      <p>{{info.name}}:<span>{{info.text}}</span></p>
                    </template>
                  </div>
                </td>
                <td>
                  <div>{{sku.sku_goods_stock}}</div>
                </td>
                <td>
                  <div>{{sku.sku_price?sku.sku_price:0}}</div>
                </td>
                <td>
                  <div v-if="sku.activity_sku_in">{{sku.activity_sku_sales}}</div>
                  <div v-else>--</div>
                </td>
                <td>
                  <div v-if="'undefined' !== typeof sku.data_key">
                    <span v-if="skuData[sku.data_key].activity_sku_option == 'del'">--</span>
                    <el-input-number name="activity_sku_stock" v-model="skuData[sku.data_key].activity_sku_stock" :min="0" size="mini" controls-position="right" style="max-width: 80px;" v-else></el-input-number>
                  </div>
                  <div v-else>--</div>
                </td>
                <td>
                  <div v-if="'undefined' !== typeof sku.data_key">
                    <span v-if="skuData[sku.data_key].activity_sku_option == 'del'">--</span>
                    <el-input-number name="activity_sku_price" v-model="skuData[sku.data_key].activity_sku_price" :precision="2" :min="0" size="mini" controls-position="right" style="max-width: 90px;" v-else></el-input-number>
                  </div>
                  <div v-else>--</div>
                </td>
                <td>
                  <el-button type="success" icon="el-icon-circle-plus-outline" size="mini" @click="joinScore(1,index, $event)"  v-if="'undefined' === typeof sku.data_key || ('undefined' !== typeof sku.data_key && (skuData[sku.data_key].activity_sku_option == 'drop' || skuData[sku.data_key].activity_sku_option == 'del'))">参加</el-button>
                  <el-button type="danger" icon="el-icon-remove-outline" size="mini" @click="joinScore(0,index, $event)" v-else>取消</el-button>
                </td>
              </tr>
            </template>
            </tbody>
          </table>
      </el-main>
  </el-container>
</div>

<script>
  var activitySkuListEditVm = new Vue({
    el: '#<?php echo $uniqid;?>',
    data: {
      goods_id: '<?php echo addslashes($goods_id);?>',
      activity_id: '<?php echo addslashes($activity_id);?>',
      skuData: [],
      sku_info: JSON.parse('<?php echo addslashes($sku_info);?>'),
      batch_activity_sku_stock_visible: false,
      batch_activity_sku_price_visible: false,
    },
    created: function () {
      let SubmitSkuData = [];
      let that = this;
      if('undefined' !== typeof activityAddVM && activityAddVM.form.goods_ids instanceof Array){
        let goods_key = $.inArray(parseInt(this.goods_id), activityAddVM.form.goods_ids);
        if(goods_key > -1 && 'undefined' !== typeof activityAddVM.goodsInfoList[goods_key].skuInfo && activityAddVM.goodsInfoList[goods_key].skuInfo.length){
          SubmitSkuData = activityAddVM.goodsInfoList[goods_key].skuInfo;
        }
      }
      for (let i =0; i < that.sku_info.length; i++){
        let submit_has = false;
        let newSkudata = {};
        if(SubmitSkuData instanceof Array && SubmitSkuData.length){
          $.each(SubmitSkuData, function(index, item) {
            if(item.sku_price_id === that.sku_info[i].sku_goods_price_id){
              submit_has = true;
              newSkudata.activity_sku_in = item.is_in;
              newSkudata.activity_sku_id = item.id;
              newSkudata.activity_sku_stock = item.stock;
              newSkudata.activity_sku_price = item.price;
              newSkudata.activity_sku_option = item.option;
              newSkudata.sku_goods_price_id = item.sku_price_id;
              newSkudata.sku_goods_id = item.goods_id;
              let $data_key = that.skuData.push(newSkudata);
              that.sku_info[i].data_key = $data_key - 1;
              return false;
            }
          });
        }
        if(!submit_has && this.sku_info[i].activity_sku_in){
          newSkudata.activity_sku_in = this.sku_info[i].activity_sku_in;
          newSkudata.activity_sku_id = this.sku_info[i].activity_sku_id;
          newSkudata.activity_sku_stock = this.sku_info[i].activity_sku_stock;
          newSkudata.activity_sku_price = this.sku_info[i].activity_sku_price;
          newSkudata.activity_sku_option = this.sku_info[i].activity_sku_option;
          newSkudata.sku_goods_price_id = this.sku_info[i].sku_goods_price_id;
          newSkudata.sku_goods_id = this.sku_info[i].sku_goods_id;
          let $data_key = this.skuData.push(newSkudata);
          this.sku_info[i].data_key = $data_key - 1;
        }
      }

    },
    methods: {
      updateVMData() {
        this.$forceUpdate();
      },
      submit: function(){
        if(Array.isArray(this.skuData) && this.skuData.length){
          if('undefined' !== typeof activityAddVM && Array.isArray(activityAddVM.form.goods_ids)){
            let goods_key = $.inArray(parseInt(this.goods_id), activityAddVM.form.goods_ids);
            if(goods_key > -1){
              if(activityAddVM.goodsInfoList[goods_key].skuInfo.length){
                activityAddVM.goodsInfoList[goods_key].skuInfo.length = 0;
              }
              $.each(this.skuData, function (index, row) {
                let newSkuInfo = {};
                newSkuInfo.is_in = row.activity_sku_in;
                newSkuInfo.id = row.activity_sku_id;
                newSkuInfo.stock = row.activity_sku_stock;
                newSkuInfo.price = row.activity_sku_price;
                newSkuInfo.option = row.activity_sku_option;
                newSkuInfo.sku_price_id = row.sku_goods_price_id;
                newSkuInfo.goods_id = row.sku_goods_id;
                activityAddVM.goodsInfoList[goods_key].skuInfo.push(newSkuInfo);
              });
              activityAddVM.updateVMData();
            }
          }
          $("#activityadddlg").dialog('close');
        }else{
          $.messager.alert('提示', '没有选择商品规格','warning');
        }
      },
      joinScore:function (opt, key, ele){
        let sku_row = this.sku_info[key];
        if(opt === 1){
          if('undefined' === typeof sku_row.data_key){
            let newSkudata = {};
            newSkudata.activity_sku_in = 0;
            newSkudata.activity_sku_id = sku_row.activity_sku_id;
            newSkudata.activity_sku_stock = 0;
            newSkudata.activity_sku_price = 0;
            newSkudata.activity_sku_option = 'add';
            newSkudata.sku_goods_price_id = sku_row.sku_goods_price_id;
            newSkudata.sku_goods_id = sku_row.sku_goods_id;
            let $data_key = this.skuData.push(newSkudata);
            sku_row.data_key = $data_key - 1;
          }else{
            if(this.skuData[sku_row.data_key].activity_sku_in == 1){
              this.skuData[sku_row.data_key].activity_sku_option = 'edit';
            }
          }
          $(ele.target).closest('tr').addClass('datagrid-body-row-selected');
        }else{
          if(this.skuData[sku_row.data_key].activity_sku_in == 1){
            this.skuData[sku_row.data_key].activity_sku_option = 'del';
          }else{
            for (let i = 0; i < this.sku_info.length; i++){
              if ('undefined' !== typeof this.sku_info[i].data_key && this.sku_info[i].data_key > sku_row.data_key){
                this.sku_info[i].data_key --;
              }
            }
            this.skuData.splice(sku_row.data_key, 1);
            delete this.sku_info[key].data_key;
          }
          $(ele.target).closest('tr').removeClass('datagrid-body-row-selected');
        }
        this.updateVMData();
      },
      batchScoreSubmit(key, ele){
        if('undefined' !== key){
          let inputValue = $(ele.target).closest('.batch_activity_popover').find('input').val();
          if(inputValue === ''){
            $(ele.target).closest('.batch_activity_popover').find('input').attr('placeholder', '没有填写值').focus();
            return false;
          }
          let vue_key = 'batch_'+key+'_visible';
          this[vue_key] = false;
          if(this.skuData.length){
            this.skuData.forEach(function (item){
              if(item.activity_sku_option != 'del'){
                item[key] = inputValue;
              }
            });
          }
        }
      },
    }
  });
  $('#activityAddGoodsSkuSubmit').click(function(){
    activitySkuListEditVm.submit();
  })
  $('#th_activity_sku_sales').tooltip({
    position: 'top',
    content: '当前商品在活动中的销量',
  });
  $('#th_activity_sku_stock').tooltip({
    position: 'top',
    content: '当前商品在活动中的库存',
  });
  $('#th_activity_sku_price').tooltip({
    position: 'top',
    content: '当前商品的活动价格',
  });
</script>
<style>
  .el-header {
    background-color: #2c3e50;
    color: #FFFFFF;
    text-align: left;
    line-height: 40px;
    text-indent: 2em;
    font-size: 1.2em;
    font-weight: bold;
  }

  .goodsinfo_wenzi span{
    color: #ee650c;
  }

  .datagrid-body-row-selected, .datagrid-body-row-selected div{
    background: #acfdc9 !important;
    color: rgb(213, 18, 18) !important;
  }

  .datagrid-body-row:nth-child(2n){
    background: #f1f1f1;
  }

  .datagrid-body-row td{
    padding: 3px 0;
  }

  .select-goods-info{
    display: flex;
    padding: 5px 20px;
    background: #dedede;
  }

  .select-goods-info img{
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }

  .select-goods-info p{
    width: calc(100% - 100px);
    padding-left: 10px;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 25px;
  }

  .datagrid-htable th i.el-icon-info{
    color: #015feb;
  }

  .sku_infos_box{
    display: flex;
    padding: 2px 0;
    justify-items: center;
    justify-content: center;
  }

  .sku_infos_box p{
    font-size: .9em;
    border-left: 1px solid #1a83e8;
    text-align: center;
    padding: 0 5px;
  }

  .sku_infos_box p:first-child{
    border-left: none;
  }

  .sku_infos_box p span{
    color: #67504b;
  }

  .el-input-number.is-controls-right .el-input__inner{
    padding-left: 5px !important;
    padding-right: 35px !important;
  }

  .batch_activity_popover{
    z-index: 100000 !important;
  }

  .batch_activity_popover .el-popover__title{
    font-size: 14px;
    font-weight: bold;
  }
</style>